<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>淡入效果 - jQuery延迟加载插件(懒加载) </title>
		<link rel="stylesheet" href="cssjs/style.css" />
	</head>

	<body>
		<section class="container">
			<div class="content-wrap">
				<h2>淡入效果</h2>
				<p> 不在可视范围内的图片不会加载。滚动时按需加载。图片出现时使用的是jquery的淡入效果。请清空缓存重新测试一下。</p>
				<pre class="prettyprint">$("img.lazy").lazyload({
    effect : "fadeIn"
});</pre>
				<pre class="prettyprint">&lt;img class="lazy" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
				<div id="container"> <img class="lazy img-responsive" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"> <br/>
					<img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"> <br/>
					<img class="lazy img-responsive" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"> <br/>
					<img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"> <br/>
					<img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"> <br/>
					<img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> <br/>
				</div>
			</div>
		</section>
		<script src="cssjs/jquery-1.11.2.min.js"></script>
		<script src="cssjs/jquery.lazyload.js"></script>
		<script type="text/javascript">
			$(function() {
				$("img.lazy").lazyload({
					effect: "fadeIn"
				});
			});
		</script>
	</body>

</html>